<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no"/>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<title>购物车</title>
<script type="text/javascript" src="{:_SKIN}/weixin/car/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="{:_SKIN}/weixin/car/js/shopping.js"></script>
<script type="text/javascript" src="{:_SKIN}/weixin/car/js/vue.min.js"></script>
<script type="text/javascript" src="{:_SKIN}/weixin/car/js/axios.min.js"></script>
<script type="text/javascript" src="{:_SKIN}/weixin/car/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="{:_SKIN}/weixin/car/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="{:_SKIN}/weixin/car/css/base.css" />
<link type="text/css" rel="stylesheet" href="{:_SKIN}/weixin/car/css/module.css"  />
<style type="text/css">
	.shop-info .shop-info-text h4 {
	    font-size: 14px;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 1;
	    overflow: hidden;
	}
	.model{
		box-sizing: border-box;
		padding: 20px;
		box-shadow: 0 0 5px #ccc;
		background: #fff;
		position: fixed;
		top: 50%;
		left: 10%;
		width: 80%;
		/*z-index: 1;*/
		text-align: center;
		height: 160px;
		display: none;
	}
	.model p{
		margin-bottom: 25px;
	}
	.model button.sure{
		margin-right: 35%;
	}
</style>
</head>

<body>
<!--头部开始-->
<div class="header">
	<h1>购物车</h1>
	<a href="javascript:history.go(-1)" class="back"><span></span></a>
	<a href="#" class=""></a>
</div>
<!--头部结束-->
<div class="shopping" id="app">
   
	<img src="{:_SKIN}/weixin/car/pic/cgwc.jpg" width="100%" v-if="picShow" /> 
    
	<div class="shop-group-item">
		<div class="shop-name">
			<input type="checkbox" class="check goods-check shopCheck">
			<h4><a href="#">全选</a></h4>
			<div class="coupons"><span>领券</span><em>|</em><span onclick="edit()">编辑</span></div>
		</div>

		<ul>

			<li v-for="(result, index) in results">
				<div class="shop-info">
					<input type="checkbox" :id="isChecked" class="check goods-check goodsCheck">
					<div class="shop-info-img"><a href="#"><img :src=result.pic_list /></a></div>
					<div class="shop-info-text">
						<h4 id="title">{{ result.spname }}</h4>
						<button type="button" data-toggle="modal" data-target="#myModal" style="background: none;border: none;color: #ccc;margin-left: 0.5em;margin-bottom: 25px;margin-top: 10px;" @click="modelShow(index)">移除该商品</button>
						<!-- @click="modelShow(index) -->
						<!-- Button trigger modal -->

						<span class="pid" style="display: none;">{{ result.pid }}</span>
						<div class="shop-price">
							<div class="shop-pices"><b class="price">￥{{ result.price }}</b></div>
							<div class="shop-arithmetic">
								<a href="javascript:;" class="minus"  @click="minus(index)">-</a>
								<span class="num" >{{ result.num }}</span>
								<a href="javascript:;" class="plus" @click="plus(index)">+</a>
							</div>
						</div>
					</div>
				</div>
				<!-- 删除 -->
				<div class="model modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" role="dialog">
					<div class="modal-dialog" role="document">
					<p>
						确定要删除该商品吗
						<br>
						真的不再考虑一下我吗
					</p>					
					<button class="btn btn-danger sure" data-dismiss="modal" @click="sure(result.pid)">确定</button>
					<button class="btn btn-default delay" data-dismiss="modal" @click="delay(index)">取消</button>
					</div>
				</div>

				<!-- modal -->
				<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
					<div class="modal-dialog" role="document">
					    <div class="modal-content">
					      <div class="modal-header">
					        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
					      </div>
					      <div class="modal-body">
					        <p>
								确定要删除该商品吗
								<br>
								真的不再考虑一下我吗
							</p>	
					     </div>
					      <div class="modal-footer">
					        	<button class="btn btn-danger sure" data-dismiss="modal" @click="sure(result.pid)">确定</button>
								<button class="btn btn-default delay" data-dismiss="modal" @click="delay(index)">取消</button>
					      </div>
					    </div>
					  </div>
					</div>
				<!-- modal -->
			</li>

			<!-- <li v-for="(result, index) in results">
				<div class="shop-info">
					<input type="checkbox" class="check goods-check goodsCheck">
					<div class="shop-info-img"><a href="#"><img :src=result.pic_list /></a></div>
					<div class="shop-info-text">
						<h4>{{ result.spname }}</h4>
						<div class="shop-price">
							<div class="shop-pices"><b class="price">{{ result.price }}</b></div>
						</div>
 
					</div>

				</div>
			</li>

			<li v-for="(result, index) in results">
				<div class="shop-info">
					<input type="checkbox" class="check goods-check goodsCheck">
					<div class="shop-info-img"><a href="#"><img :src=result.pic_list /></a></div>
					<div class="shop-info-text">
						<h4>{{ result.spname }}</h4>
						<div class="shop-price">
							<div class="shop-arithmetic">
								<a href="javascript:;" class="minus">-</a>
								<span class="num" >1</span>
								<a href="javascript:;" class="plus">+</a>
							</div>
						</div>

					</div>

				</div>
			</li> -->
		</ul>

		<div class="shopPrice" style="display: none">本店总计：￥<span class="shop-total-amount ShopTotal">0.00</span></div>
	</div>
	

</div>

<div class="payment-bar">
	<div class="all-checkbox"><input type="checkbox" class="check goods-check" id="AllCheck">全选</div>
	<div class="shop-total">
		<!-- <strong>总价：<i class="total" id="AllTotal">sum</i></strong> -->
		<strong>总价：<i>sum</i></strong>
		<span>减免：123.00</span>
	</div>
	<a href="#" class="settlement">结算</a>
</div>
<script>
	setTimeout(function(){

        $("#AllCheck").click();

	},500);

</script>
<script type="text/javascript">
			const goodsinfo = new Vue({
				el:'#app',
				data:{
					results:[],
					picShow: true,
					sum: 0,
					isChecked: true,
					curDelGid : 0,
				},
				computed: {

				},
				methods: {
					//添加数量
                    plus(index){
                        var  num = document.getElementsByClassName('num')[index];
                        var  val = num.innerHTML;
                        val++
                        // console.log(val)
                        num.innerText = val
                    },
                    //减少数量
                    minus(index){
                        var  num = document.getElementsByClassName('num')[index];
                        var  val = num.innerHTML;
                        if (val>1) {
                        	val--
                        }
                        // console.log(val)
                        num.innerText = val
                    },
                    // pic(){
                    // 	console.log(this.results.length === 0)
                    // 	console.log(this.picShow)
                    // 	if (this.results.length != 0) {
                    // 		this.picShow = false
                    // 	}
                    // },
                    //model显示
                    modelShow(index){
                    	var model = document.getElementsByClassName('model')[index];
                    	model.style.display = 'block'
                    },
                    //取消删除
                    delay(index){
                    	var model = document.getElementsByClassName('model')[index];
                    	var delay = document.getElementsByClassName('delay')[index];
                    	model.style.display = 'none';
                    	// console.log(index)
                    },
                    del(gid){
						this.showBox = true;
						this.curDelGid = gid;
					},
                    //确定删除
                   //  sure(){
                   //  	// var model = document.getElementsByClassName('model')[index];
                   //  	// var delay = document.getElementsByClassName('delay')[index];
                   //  	// model.style.display = 'none';
                   //  	// axios.get("{:url('cart/removeCart')}")
                   //  	// 	.then(function(response){
                   //  	// 		console.log(response)
                   //  	// 	})
                   //  	// 	.catch(function(error){
                   //  	// 		console.log(error)
                   //  	// 	})
                    		
                   //  	axios.get("{:url('cart/removeCart?results.pid')}",{
              				
                    		
                   //  	})
                    		
			                // .then(function(response) {
			                // 	//console.log(response.data.data,index)
	                  //           // goodsinfo.$data.results = response.data.data;
			                // })
			                // .catch(function(error) {
			                //     //console.log(error);
			                // }); 

                   //  },
                   sure(pid){
                        // axios.post("{:url('cart/selectCart')}")
                        // .then(function(response) {
                        //     var deldatas = response.data.data;
                        //     for (let i = 0; i < deldatas.length; i++) {
                        //         if (pid === deldatas[i].pid) {
	                       //          deldatas.splice(i, 1)
	                       //          // location.reload()
	                       //          console.log(deldatas,pid)
	                       //          return
                        //         }
                        //     }
                        //     // for (let i = 0; i < this.results.length; i++) {
	                       //     //  if (pid === this.results[i].pid) {
	                       //     //    this.results.splice(i, 1)
	                       //     //    return
	                       //     //  }
                        //     // }
                        // })
                        // .catch(function(error) {
                        //     console.log(error);
                        // });
                        for (let i = 0; i < this.results.length; i++) {
                            if (pid === this.results[i].pid) {
                                this.results.splice(i, 1)
                                return
                            }
                        }
                       axios.post("{:url('cart/selectCart')}",this.results)
                        .then(function(response) {
                           response.data.data = this.results
                        })
                        .catch(function(error) {
                            console.log(error);
                        }); 
                    },

                    //是否勾选
                    checked(index){

                    }
                },
				 mounted() {
		            axios.get("{:url('cart/selectCart')}")
		                .then(function(response) {
		                	console.log(response.data.data)
                            goodsinfo.$data.results = response.data.data;
		                })
		                .catch(function(error) {
		                    console.log(error);
		                }); 

		        },
		        watch: {
		        	results(){
		        		if (this.results.length != 0) {
                    		this.picShow = false
                    	}
		        	},
		        	sum(){

		        	}
		        }
			})

		</script>
		<script type="text/javascript">
			var url = "{:url('cart/selectCart')}";
			function get(url,callback){
				var xhr=new XMLHttpRequest;
				xhr.open('get',url,true);
				xhr.send();
				xhr.onreadystatechange=function(){
					if(xhr.readyState===4 && xhr.status===200){
						callback && (typeof callback==='function') && callback(xhr)   
					}
					if(!callback){
						throw new Error('请传入回调函数')
					}else if(typeof callback != 'function'){
						throw new Error('')
					}
					
				}
			}
		</script>
</body>
</html>
